<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery测试</title>
    <style>
        .div {
            width: 100px;
            height: 100px;
            ;
        }

        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }

        #m1 {
            color: red;
        }


        .text-show {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <ul id="otherList">
        <li id="other-1">aaa</li>
    </ul>
    <hr />

    <ul id="myList">
        <li id="m1"><span>ssss</span></li>
        <li id="m2">企业介绍</li>
    </ul>
    <hr />

    <input type="text" name="userName" value="aaa" />
    <input type="text" name="userName-1" value="bbb" />
    <hr />

    <p class="text-show">AAAA</p>
    <p class="text-show-1">BBBB<span>CCC</span></p>

    <hr />
    <div id="show-div" class="red other-style div"></div>
    <button id="change">改变</button>

    <p>
        <img class="show-img"
            src="https://www.situ.edu.cn/__local/E/BA/38/C5E9DE600E782C6B1C0C0FD5C6D_18FF239F_1AF82.png" />
    </p>
    <button id="changeImg">改变图片</button>

    <div style="margin: 10px 0;">
        <table id="td-id" border="1">
            <tr>
                <td>序号</td>
                <td>Name</td>
            </tr>
            <tr>
                <td>1</td>
                <td>章三</td>
            </tr>
        </table>
    </div>
    <button id="hideTable">显示隐藏表格</button>

    <hr />

    <div class="tool-btn">
        <button id="add">添加</button>
    </div>

    <table id="table-id" border="1">
        <tbody>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>班级</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>21级计算机10班</td>
                <td>
                    <button onclick="deleteNode(this)">删除</button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>女</td>
                <td>21级计算机10班</td>
                <td><button onclick="deleteNode(this)">删除</button></td>
            </tr>
        </tbody>
    </table>

    <script src="../../lib/jquery-3.6.0.min.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script> -->
    <script>
        let ulnode = $('#ul');
        console.log(ulnode);

        console.log($('#other-1').html());
        $('#other-1').html('BBB');
        console.log($('#other-1').html());

        console.log($("input[name='userName-1']").val());
        $("input[name='userName-1']").val('CCCbbb');
        console.log($("input[name='userName-1']").val());

        $('#changeImg').on('click', function (event) {
            console.log(event);
            console.log($('.show-img').attr('src'));
            $('.show-img').attr('src', 'https://www.situ.edu.cn/__local/7/0A/EE/A1656D32136AC775C1FE27FC930_61665838_AD19E.png')
        });

        // setTimeout(function(){
        //     $('#changeImg').click();
        // },1000)


        $('#hideTable').click(function (event) {
            let obj = $('#td-id');

            obj.hide('normal');

            // if (obj.css('display') == 'none') {
            //     obj.show('slow', function () {
            //         $('#hideTable').html('隐藏表格');
            //         $('#hideTable').css({ 'background-color': '#ccc', 'color': 'red' });
            //     });
            // } else {
            //     obj.hide('normal', function () {
            //         $('#hideTable').html('显示表格');
            //         $('#hideTable').css('background-color', 'green');
            //     });
            // }

            // obj.toggle('slow', function(){
            //     alert('调整完');
            // });
        });


        $('#change').on('click', function (event) {
            if ($('#show-div').hasClass('red')) {
                $('#show-div').removeClass('red').addClass('blue');
            } else {
                $('#show-div').removeClass('blue').addClass('red');
            }
        });


        $('#add').on('click', function () {
            // let num = $('#table-id').find('tr').length;
            let num = $('#table-id tr').length;

            let doc = `
                <tr>
                    <td>${num}</td>
                    <td>AA</td>
                    <td>男</td>
                    <td>21级计算机10班</td>
                    <td><button onclick="deleteNode(this)">删除</button></td>
                </tr>
            `;

            $('#table-id tbody').append(doc);
        });

        function deleteNode(node) {
            let trNode = $(node).parent().parent();
            trNode.remove();
        }

    </script>
</body>

</html>